
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <!--/* Meta Tags */-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Appinocks App Landing Page Template">
    <meta name="keywords" content="app landing page,business,finance,corporate,landing page,ui,ux">
    <meta name="author" content="ChiangDaiEn">
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Appinocks - App Landing Page Template</title>
		<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.png" />
		<!--/* Icons */-->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!--/* Google Fonts */-->
		<link href="css/google-font-poppins.css" rel="stylesheet" type="text/css">
		<link href="css/google-font-roboto.css" rel="stylesheet" type="text/css">

		<link href="css/fonts.css" rel="stylesheet">
		<!--/* bootstrap */-->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!--/* FrameWorks */-->
		<link href="css/frameworks.css" rel="stylesheet">
		<!--/* Theme Main Js */-->
		<link href="css/style.css" rel="stylesheet">
		<link href="css/fonts.css" rel="stylesheet">
</head>

<body data-spy="scroll" data-target="#fixedNavbar" data-offset="0">
    <!--/* Page Wrapper Start */-->
    <div class="page-wrapper" id="home">
        <!-- Header Start -->
        <header class="header">
            <div class="container">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="index.html">
                        <img src="img/bg/logo.png" alt="Logo">
                    </a>
                    <!--/* .logo */-->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#fixedNavbar" aria-controls="fixedNavbar" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="togler-icon-inner">
                            <span class="line-1"></span>
                        <span class="line-2"></span>
                        <span class="line-3"></span>
                        </span>
                    </button>
                    <div class="collapse navbar-collapse main-menu justify-content-end" id="fixedNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#" data-scroll-nav="0">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="2">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="3">Features</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="4">Screenshoots</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="5">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="6">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="7">Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <!--/* .navbar-nav */-->
            </div>
            <!--/* .container */-->
        </header>
        <!--/* Header End  */-->

        <!--/* Hero Section Start */-->
        <section class="hero-section" data-scroll-index="0">
            <div class="container h-100">
                <div class="row align-items-center h-100">
                    <div class="col-lg-7 col-md-10 col-sm-12">
                        <h1 class="hero-section-title wow fadeInUp" data-wow-delay="0.2s">
                            Take your company forward with Appinocks
                        </h1>
                        <p class="hero-section-subtitle wow fadeInUp" data-wow-delay="0.3s">
                            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                        </p>
                        <a href="#" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s" id="downloadBtn">Get Started<i class="fa fa-angle-right ml-2"></i></a>
                        <a href="https://www.youtube.com/watch?v=yTHTo28hwTQ" class="default-video-btn popup-youtube wow fadeInUp" data-wow-delay="0.5s"><i class="fa fa-play"></i></a>
                    </div>
                    <!--/* .col */-->
                    <div class="col-lg-5 hero-image text-right wow fadeInRight">
                        <img src="img/bg/hero_image.png" alt="Hero image" class="img-fluid img-jump">
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
            <a href="#" data-scroll-nav="1" class="down-scroll"> 
                <i class="fa fa-arrow-down"></i>
            </a>
            <!--/* .down-scroll */-->
        </section>
        <!--/* Hero Section End  */-->

        <!--/* Services Section Start */-->
        <section class="services section-padding" data-scroll-index="1" id="services-area">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title">Best <span>Services</span></h2>
                            <p class="section-sub-title">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="row align-items-center justify-content-center">
                    <div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
                        <div class="services-item item-shadow">
                            <div class="services-icon services-blue-icon">
                                <i class="fa fa-binoculars"></i>
                            </div>
                            <div class="services-body">
                                <h5>Full Responsive</h5>
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>
                            </div>
                            <a href="#0" class="services-link text-capitalize">Read More<i class="fa fa-angle-right ml-2"></i></a>
                        </div>
                    </div>
                    <!--/* .col */-->
                    <div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
                        <div class="services-item item-shadow">
                            <div class="services-icon">
                                <i class="fa fa-bell-o"></i>
                            </div>
                            <div class="services-body">
                                <h5>Easy Customize</h5>
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>
                            </div>
                            <a href="#0" class="services-link text-capitalize">Read More<i class="fa fa-angle-right ml-2"></i></a>
                        </div>
                    </div>
                    <!--/* .col */-->
                    <div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
                        <div class="services-item item-shadow">
                            <div class="services-icon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <div class="services-body">
                                <h5>Extreme Security</h5>
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>
                            </div>
                            <a href="#0" class="services-link text-capitalize">Read More<i class="fa fa-angle-right ml-2"></i></a>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Services Section End */-->

        <!--/* About Section Start */-->
        <section class="about section-padding" data-scroll-index="2" id="about">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-5 col-lg-6 wow fadeInLeft text-left">
                        <img src="img/bg/about-img.png" alt="About image" class="img-fluid img-jump">
                    </div>
                    <!--/* .col */-->
                    <div class="col-md-7 col-lg-6 wow fadeInUp">
                        <div class="about-inner">
                            <span class="section-badge">About Us</span>
                            <h3>Stay one step ahead with Appinocks.</h3>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                            </p>
                        </div>
                        <div class="about-list">
                            <ul>
                                <li><i class="fa fa-check"></i>Bugs resolved, built with secure data.</li>
                                <li><i class="fa fa-check"></i>Modern browser support and mobile menu options.</li>
                                <li><i class="fa fa-check"></i>Social media video sharing plugin</li>
                            </ul>
                        </div>
                        <a href="#0" class="default-btn">Get Started 
                            <i class="ml-2 fa fa-angle-right"></i>
                        </a>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* About Section End */-->

        <!--/* Features Section Start */-->
        <section id="features" class="features-section section-padding" data-scroll-index="3">
            <div class="container">
                <div class="features-row">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-md-7 col-lg-6 wow fadeInLeft">
                            <div class="features-inner">
                                <span class="section-badge">Features</span>
                                <h3>See the unique features of Appinocks.</h3>
                                <p>
                                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                </p>
                                <ul class="features-list">
                                    <li class="d-flex align-items-center">
                                        <i class="fa fa-calendar-o"></i> 
                                        <div class="features-box">
                                            <h6>Responsive design</h6>
                                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <i class="fa fa-clipboard"></i>
                                        <div class="features-box">
                                            <h6>Free Updates</h6>
                                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <i class="fa fa-cogs"></i>
                                        <div class="features-box">
                                            <h6>Clean Code</h6>
                                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
                            <div class="features-circle"></div>
                            <div class="feature-image-wrap wow zoomIn" data-wow-delay="0.8s">
                                <img src="img/bg/features-image-2.png" alt="About image" class="img-fluid img-jump">
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
                <div class="features-row features-row-mt">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-md-5 col-lg-5 text-center features-image-order features-image-resp wow slideInLeft">
                            <div class="features-circle"></div>
                            <div class="feature-image-wrap wow zoomIn" data-wow-delay="0.8s">
                                <img src="img/bg/features-image-1.png" alt="About image" class="img-fluid img-jump">
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-md-7 col-lg-6 about-content-wrap wow fadeInRight">
                            <div class="features-inner">
                                <span class="section-badge">Install</span>
                                <h3>Easy customization and quick Installation.</h3>
                                <p>
                                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                </p>
                                <ul class="features-list">
                                    <li class="d-flex align-items-center">
                                        <i class="fa fa-flask"></i>
                                        <div class="features-box">
                                            <h6>Retina Ready</h6>
                                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                       <i class="fa fa-cogs"></i>
                                        <div class="features-box">
                                            <h6>Unique Design</h6>
                                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <i class="fa fa-clipboard"></i>
                                        <div class="features-box">
                                            <h6>Free Support</h6>
                                            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Features Section Start */-->

        <!--/* How It Works Section Start */-->
        <section id="how-it-works" class="how-it-works-section jarallax bg-gradient-green section-padding" data-jarallax data-speed="0.3s">
            <div class="jarallax-img how-it-works-bg"></div>
            <div class="container">
                <!--/* .row */-->
                <div class="row justify-content-center align-items-center how-it-work-wrap">
                    <div class="col-lg-7 col-md-10 col-sm-12">
                        <div class="how-it-works-inner text-center">
                            <h3 class="text-white">Watch video tutorial</h3>
                            <p>
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries..
                            </p>
                            <div class="how-it-work-video">
                                <img src="img/bg/how-it-work-image.png" alt="How it work image" class="img-fluid">
                                <a href="https://www.youtube.com/watch?v=yTHTo28hwTQ" class="how-it-works-video-btn popup-youtube"><i class="fa fa-play"></i></a>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="how-it-work-process">
                    <div class="row text-center">
                        <div class="col-lg-3 col-md-6 col-sm-6 how-it-work-item active">
                            <div class="how-it-work-number">
                                <a href="#0"><span>01</span></a>
                            </div>
                            <h6>Download</h6>
                            <div class="how-it-work-text">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-3 col-md-6 col-sm-6 how-it-work-item">
                            <div class="how-it-work-number">
                                <a href="#0"><span>02</span></a>
                            </div>
                            <h6>Install</h6>
                            <div class="how-it-work-text">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-3 col-md-6 col-sm-6 how-it-work-item">
                            <div class="how-it-work-number">
                                <a href="#0"><span>03</span></a>
                            </div>
                            <h6>Customize</h6>
                            <div class="how-it-work-text">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-3 col-md-6 col-sm-6 how-it-work-item">
                            <div class="how-it-work-number">
                                <a href="#0"><span>04</span></a>
                            </div>
                            <h6>Use It</h6>
                            <div class="how-it-work-text">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
            </div>
            <!--/* .container */-->
        </section>
        <!--/* How It Works Section End */-->

        <!--/* Screenshots Section Start */-->
        <section class="screenshots-section section-padding" data-scroll-index="4">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title">App<span>Screenshots</span></h2>
                            <p class="section-sub-title">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="screenshot-slider-wrap">
                    <div class="screenshots-slider owl-carousel owl-theme">
                        <div class="item">
                            <img src="img/screenshot/screen-shot-1.jpg" alt="Screenshoots image" class="img-fluid">
                        </div>
                        <!--/* .item */-->
                        <div class="item">
                            <img src="img/screenshot/screen-shot-2.jpg" alt="Screenshoots image" class="img-fluid">
                        </div>
                        <!--/* .item */-->
                        <div class="item">
                            <img src="img/screenshot/screen-shot-3.jpg" alt="Screenshoots image" class="img-fluid">
                        </div>
                        <!--/* .item */-->
                        <div class="item">
                            <img src="img/screenshot/screen-shot-4.jpg" alt="Screenshoots image" class="img-fluid">
                        </div>
                        <!--/* .item */-->
                        <div class="item">
                            <img src="img/screenshot/screen-shot-5.jpg" alt="Screenshoots image" class="img-fluid">
                        </div>
                        <!--/* .item */-->
                        <div class="item">
                            <img src="img/screenshot/screen-shot-6.jpg" alt="Screenshoots image" class="img-fluid">
                        </div>
                    </div>
                </div>
                <!--/* .screenshots-slider-wrap */-->
            
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Screenshots Section End */-->

        <!--/* Pricing Section Start */-->
        <section class="price-section section-padding" data-scroll-index="5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title">Pricing<span>Table</span></h2>
                            <p class="section-sub-title">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="row justify-content-center text-center">
                    <div class="col-lg-7">
                        <div class="price-toggle-wrap">
                            <a href="#0" class="active">Monthly</a>
                            <a href="#0" class="mr-0">Annualy</a>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="pricing-tab-content active">
                    <div class="row justify-content-md-center">
                        <div class="col-lg-4 col-md-6 col-sm-12 price-table-margin">
                            <div class="price-table item-shadow">
                                <div class="price-header d-flex justify-content-between align-items-center">
                                    <div class="price-value">
                                        <h4>Basic</h4>
                                        <h5>
                                            $35.70<sub class="h5 text-lowercase">/mo</sub>
                                        </h5>
                                    </div>
                                    <div class="price-icon">
                                        <span class="mdi mdi-city-variant"><i class="fa fa-cny"></i></span>
                                    </div>
                                </div>
                                <div class="price-body">
                                    <ul>
                                        <li>1GB Bandwidth</li>
                                        <li>10 GB Diskspace</li>
                                        <li>5 Domain Names</li>
                                        <li>4 Email Adress</li>
                                        <li>Private Support</li>
                                    </ul>
                                </div>
                                <div class="price-btn-wrap">
                                    <a href="#0" class="default-btn">Star with Basic <i class="fa fa-shield-alt float-right pt-1"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-4 col-md-6 col-sm-12 price-table-active price-table-margin">
                            <div class="price-table">
                                <div class="price-header d-flex justify-content-between align-items-center">
                                    <div class="price-value">
                                        <h4>Pro</h4>
                                        <h5>
                                            $35.70<sub class="h5 text-lowercase">/mo</sub>
                                        </h5>
                                    </div>
                                    <div class="price-icon">
                                        <span class="mdi mdi-shield-account-outline"><i class="fa fa-cny"></i></span>
                                    </div>
                                </div>
                                <div class="price-body">
                                    <ul>
                                        <li>5GB Bandwidth</li>
                                        <li>50 GB Diskspace</li>
                                        <li>10 Domain Names</li>
                                        <li>8 Email Adress</li>
                                        <li>Private Support</li>
                                    </ul>
                                </div>
                                <div class="price-btn-wrap">
                                    <a href="#0" class="default-btn">Star with Pro <i class="fa fa-shield-alt float-right pt-1"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="price-table item-shadow">
                                <div class="price-header d-flex justify-content-between align-items-center">
                                    <div class="price-value">
                                        <h4>Ultimate</h4>
                                        <h5>
                                            $55.70<sub class="h5 text-lowercase">/mo</sub>
                                        </h5>
                                    </div>
                                    <div class="price-icon">
                                        <span class="mdi mdi-domain"><i class="fa fa-cny"></i></span>
                                    </div>
                                </div>
                                <div class="price-body">
                                    <ul>
                                        <li>10GB Bandwidth</li>
                                        <li>500 GB Diskspace</li>
                                        <li>15 Domain Names</li>
                                        <li>15 Email Adress</li>
                                        <li>Private Support</li>
                                    </ul>
                                </div>
                                <div class="price-btn-wrap">
                                    <a href="#0" class="default-btn">Star with Ultimate <i class="fa fa-shield-alt float-right pt-1"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
                <div class="pricing-tab-content">
                    <div class="row justify-content-md-center">
                        <div class="col-lg-4 col-md-6 col-sm-12 price-table-margin">
                            <div class="price-table item-shadow">
                                <div class="price-header d-flex justify-content-between align-items-center">
                                    <div class="price-value">
                                        <h4>Basic</h4>
                                        <h5>
                                            $65.70<sub class="h5 text-lowercase">/mo</sub>
                                        </h5>
                                    </div>
                                    <div class="price-icon">
                                        <i class="fa fa-cny"></i>
                                    </div>
                                </div>
                                <div class="price-body">
                                    <ul>
                                        <li>1GB Bandwidth</li>
                                        <li>10 GB Diskspace</li>
                                        <li>5 Domain Names</li>
                                        <li>4 Email Adress</li>
                                        <li>Private Support</li>
                                    </ul>
                                </div>
                                <div class="price-btn-wrap">
                                    <a href="#0" class="default-btn">Star with Basic <i class="fa fa-shield-alt float-right pt-1"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-4 col-md-6 col-sm-12 price-table-active price-table-margin">
                            <div class="price-table">
                                <div class="price-header d-flex justify-content-between align-items-center">
                                    <div class="price-value">
                                        <h4>Pro</h4>
                                        <h5>
                                            $85.70<sub class="h5 text-lowercase">/mo</sub>
                                        </h5>
                                    </div>
                                    <div class="price-icon">
                                        <i class="fa fa-cny"></i>
                                    </div>
                                </div>
                                <div class="price-body">
                                    <ul>
                                        <li>1GB Bandwidth</li>
                                        <li>50 GB Diskspace</li>
                                        <li>10 Domain Names</li>
                                        <li>8 Email Adress</li>
                                        <li>Private Support</li>
                                    </ul>
                                </div>
                                <div class="price-btn-wrap">
                                    <a href="#0" class="default-btn">Star with Pro <i class="fa fa-shield-alt float-right pt-1"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="price-table item-shadow">
                                <div class="price-header d-flex justify-content-between align-items-center">
                                    <div class="price-value">
                                        <h4>Ultimate</h4>
                                        <h5>
                                            $95.70<sub class="h5 text-lowercase">/mo</sub>
                                        </h5>
                                    </div>
                                    <div class="price-icon">
                                        <i class="fa fa-flask"></i>
                                    </div>
                                </div>
                                <div class="price-body">
                                    <ul>
                                        <li>10GB Bandwidth</li>
                                        <li>100 GB Diskspace</li>
                                        <li>10 Domain Names</li>
                                        <li>12 Email Adress</li>
                                        <li>Private Support</li>
                                    </ul>
                                </div>
                                <div class="price-btn-wrap">
                                    <a href="#0" class="default-btn">Star with Ultimate <i class="fa fa-shield-alt float-right pt-1"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Pricing Section End */-->

        <!--/* Testimonial Section Start */-->
        <section class="testimonial-section jarallax section-padding" data-jarallax data-speed="0.2s">
            <div class="testimonial-section-bg jarallax-img"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title text-white">Our<span class="text-white">Clients</span></h2>
                            <p class="section-sub-title text-white">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-12">
                        <div class="testimonial-slider owl-carousel owl-theme">
                            <div class="item">
                                <div class="testimonial-item">
                                    <div class="testimonial-body d-flex align-items-start">
                                        <div class="testimonial-img mr-3">
                                            <img src="img/blog/comments-image-2.png" alt="" class="img-fluid">
                                        </div>
                                        <div class="testimonial-inner">
                                            <h5>George William</h5>
                                            <span>Graphic Designer</span>
                                            <div class="testimonial-rating">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-text">
                                        <p>
                                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!--/* .item */-->
                            <div class="item">
                                <div class="testimonial-item">
                                    <div class="testimonial-body d-flex align-items-start">
                                        <div class="testimonial-img mr-3">
                                            <img src="img/blog/comments-image-3.png" alt="" class="img-fluid">
                                        </div>
                                        <div class="testimonial-inner">
                                            <h5>Edward Addison</h5>
                                            <span>Graphic Designer</span>
                                            <div class="testimonial-rating">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-text">
                                        <p>
                                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!--/* .item */-->
                            <div class="item">
                                <div class="testimonial-item">
                                    <div class="testimonial-body d-flex align-items-start">
                                        <div class="testimonial-img mr-3">
                                            <img src="img/blog/comments-image-1.png" alt="" class="img-fluid">
                                        </div>
                                        <div class="testimonial-inner">
                                            <h5>Eduardo Dutra</h5>
                                            <span>Project Supervisor</span>
                                            <div class="testimonial-rating">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-text">
                                        <p>
                                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!--/* .item */-->
                        </div>
                    </div>
                    
                    <!--/* .col */-->
                </div>
            </div>
            <!--/* .container */-->

            <!--/* Counter Start */-->
            <div class="counters testimonial-section-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-6 counters-item  col-xs-12 wow fadeInUp" data-wow-delay="0.1s">
                            <div class="counter-item-inner text-center">
                                <div class="counter-icon">
                                    <span class="mdi mdi-download"></span>
                                </div>
                                <div class="counter-body">
                                    <h2 class="counter">1500</h2>
                                    <p>Customer Support</p>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 counters-item wow fadeInUp" data-wow-delay="0.2s">
                            <div class="counter-item-inner text-center">
                                <div class="counter-icon">
                                    <span class="mdi mdi-account-switch"></span>
                                </div>
                                <div class="counter-body">
                                    <h2 class="counter">3500</h2>
                                    <p>People Connect</p>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-3 col-md-6 col-sm-6 counters-item col-xs-12 wow fadeInUp" data-wow-delay="0.3s">
                            <div class="counter-item-inner text-center">
                                <div class="counter-icon">
                                    <span class="mdi mdi-bell-ring"></span>
                                </div>
                                <div class="counter-body">
                                    <h2 class="counter">1150</h2>
                                    <p>Notifications</p>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 counters-item wow fadeInUp" data-wow-delay="0.4s">
                            <div class="counter-item-inner text-center">
                                <div class="counter-icon">
                                    <span class="mdi mdi-download"></span>
                                </div>
                                <div class="counter-body">
                                    <h2 class="counter">1500</h2>
                                    <p>Download</p>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
                <!--/* .container */-->
            </div>
            <!--/* Counter End */-->
        </section>
        <!--/* Testimonial Section End */-->

        <!--/* Our Team Section Start */-->
        <section class="our-team-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title">Meet Our<span>Team</span></h2>
                            <p class="section-sub-title">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="row">
                    <div class="col-md-4 col-sm-12 text-center team-card-margin wow fadeInLeft" data-wow-delay="0.2s">
                        <div class="team-card item-shadow">
                            <div class="team-img">
                                <img src="img/team/team-image-1.png" alt="Team image" class="img-fluid">
                                <ul class="team-social">
                                    <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-card-content">
                                <h5 class="title">Edward William</h5>
                                <span class="desc">web developer</span>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                    <div class="col-md-4 col-sm-12 text-center team-card-margin wow fadeInUp" data-wow-delay="0.4s">
                        <div class="team-card item-shadow">
                            <div class="team-img">
                                <img src="img/team/team-image-2.png" alt="Team image" class="img-fluid">
                                <ul class="team-social">
                                    <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-card-content">
                                <h5 class="title">Thomas Davies</h5>
                                <span class="desc">UI/UX Designer</span>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                    <div class="col-md-4 col-sm-12 text-center team-card-margin wow fadeInDown" data-wow-delay="0.6s">
                        <div class="team-card item-shadow">
                            <div class="team-img">
                                <img src="img/team/team-image-3.png" alt="Team image" class="img-fluid">
                                <ul class="team-social">
                                    <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-card-content">
                                <h5 class="title">Adrian Smith</h5>
                                <span class="desc">project supervisor</span>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Our Team Section End */-->

        <!--/* Download Section Start */-->
        <section class="download-wrap section-padding jarallax" data-jarallax="" data-speed="0.2s">
            <div class="download-section-bg jarallax-img"></div>
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-6 download-image wow slideInLeft">
                        <img src="img/bg/download-img.png" alt="" class="img-fluid img-jump">
                    </div>
                    <!--/* .col */-->
                    <div class="col-lg-6 col-md-12 col-sm-11 col-xs-12 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="download-section-inner">
                            <h2>Download Appinocks Our Today.</h2>
                            <p>
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                            <div class="download-stars d-flex justify-content-start align-items-center">
                                <div class="download-ratings d-flex align-items-center">
                                    <span>4.5</span>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half-alt"></i>
                                </div>
                                <span class="download-rate-count">1200 +</span>
                            </div>
                            <div class="download-buttons d-flex justify-content-start">
                                <a href="#0" class="download-btn">
                                    <i class="fa fa-android"></i>
                                    <span>Download</span>
                                    <span>Play Store</span>
                                </a>
                                <a href="#0" class="download-btn">
                                    <i class="fa fa-apple"></i>
                                    <span>Download</span>
                                    <span>App Store</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Download Section End */-->

        <!--/* Latest Blog Section End */-->
        <section class="latest-blog section-padding" data-scroll-index="6">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title">Latest<span>News</span></h2>
                            <p class="section-sub-title">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="row justify-content-md-center">
                    <div class="col-lg-4 col-md-6 blog-item-margin col-sm-12">
                        <div class="latest-blog-item item-shadow">
                            <div class="blog-img">
                                <img src="img/blog/blog-img-6.png" alt="Blog image" class="img-fluid">
                                <ul class="blog-single-link">
                                    <li class="animated fadeInUp">
                                        <a href="blog-single.html"><i class="fa fa-link"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="blog-item-inner">
                                <div class="blog-body">
                                    <a href="blog-single.html" class="blog-title-link">
                                        <h6>The most important design principles</h6>
                                    </a>
                                    <p>
                                        It is a long established fact that a reader will be distracted by the.
                                    </p>
                                </div>
                                <div class="blog-detail d-flex justify-content-between align-items-center">
                                    <div class="blog-author d-flex align-items-center">
                                        <img src="img/bg/latest-blog-img-1.png" alt="" class="img-fluid rounded-circle">
                                        <h6>Alex Bolt</h6>
                                    </div>
                                    <div class="blog-like">
                                        <a href="#0" class="mr-2">
                                            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                            <span>10</span>
                                        </a>
                                        <a href="#0">
                                            <i class="fa fa-commenting-o" aria-hidden="true"></i>
                                            <span>50</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                    <div class="col-lg-4 col-md-6 blog-item-margin col-sm-12">
                        <div class="latest-blog-item item-shadow">
                            <div class="blog-img">
                                <img src="img/blog/blog-img-5.png" alt="Blog image" class="img-fluid">
                                <ul class="blog-single-link">
                                    <li class="animated fadeInUp">
                                        <a href="blog-single.html"><i class="fa fa-link"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="blog-item-inner">
                                <div class="blog-body">
                                    <a href="blog-single.html" class="blog-title-link">
                                        <h6>The most trendy ui design examples</h6>
                                    </a>
                                    <p>
                                        It is a long established fact that a reader will be distracted by the.
                                    </p>
                                </div>
                                <div class="blog-detail d-flex justify-content-between align-items-center">
                                    <div class="blog-author d-flex align-items-center">
                                        <img src="img/bg/latest-blog-img-2.png" alt="" class="img-fluid rounded-circle">
                                        <h6>John Filler</h6>
                                    </div>
                                    <div class="blog-like">
                                        <a href="#0" class="mr-2">
                                            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                            <span>10</span>
                                        </a>
                                        <a href="#0">
                                            <i class="fa fa-commenting-o" aria-hidden="true"></i>
                                            <span>50</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                    <div class="col-lg-4 col-md-6 blog-item-margin col-sm-12">
                        <div class="latest-blog-item item-shadow">
                            <div class="blog-img">
                                <img src="img/blog/blog-img-4.png" alt="Blog image" class="img-fluid">
                                <ul class="blog-single-link">
                                    <li class="animated fadeInUp">
                                        <a href="blog-single.html"><i class="fa fa-link"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="blog-item-inner">
                                <div class="blog-body">
                                    <a href="blog-single.html" class="blog-title-link">
                                        <h6>Application security and solutions</h6>
                                    </a>
                                    <p>
                                        It is a long established fact that a reader will be distracted by the.
                                    </p>
                                </div>
                                <div class="blog-detail d-flex justify-content-between align-items-center">
                                    <div class="blog-author d-flex align-items-center">
                                        <img src="img/bg/latest-blog-img-3.png" alt="" class="img-fluid rounded-circle">
                                        <h6>Adrian Husey</h6>
                                    </div>
                                    <div class="blog-like">
                                        <a href="#0" class="mr-2">
                                            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                            <span>10</span>
                                        </a>
                                        <a href="#0">
                                            <i class="fa fa-commenting-o" aria-hidden="true"></i>
                                            <span>50</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Latest Blog Section End */-->

        <!--/* Newsletter Section Start */-->
        <section class="newsletter section-padding">
            <div class="container">
                <div class="row justify-content-center newsletter-wrap">
                    <div class="col-lg-7 text-center">
                        <h3 class="text-white newsletter-title">10,000 Trusted Membership Activation Subscribe to be notified.</h3>
                        <form action="index.html">
                            <div class="newsletter-form-group">
                                <input type="text" class="newsletter-form-control" name="newsletter_form_email" required placeholder="Email Address">
                                <button class="newsletter-form-btn" type="submit">Subscribe</button>
                                <span class="mdi mdi-email-outline"></span>
                            </div>
                        </form>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Newsletter Section End */-->

        <!--/* FAQ Section Start */-->
        <section class="faq">
            <div class="container">
                <div class="faq-content-wrap">
                    <div class="row justify-content-center">
                        <div class="col-lg-7">
                            <div class="faq-inner-wrap">
                                <div class="section-heading">
                                    <h2 class="section-title">What Questions Do Our Customers <span>Ask Most Often?</span></h2>
                                    <p class="section-sub-title">
                                        If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-6">
                            <div class="accordion" id="faq-tab-accordion">
                                <div class="card faq-item">
                                    <a class="card-header d-flex align-items-center justify-content-between" href="#0" data-toggle="collapse" data-target="#faq-tab-1" aria-expanded="true" aria-controls="faq-tab-1" id="faq-tab-1-header">
                                        <h6><span class="accordion-card-number">01</span>How Are The Packages Updated ?</h6>
                                        <span class="card-toggle-btn"></span>
                                    </a>
                                    <div id="faq-tab-1" class="collapse show" aria-labelledby="faq-tab-1-header" data-parent="#faq-tab-accordion">
                                        <div class="card-body">
                                            <p>
                                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--/* .faq-item */-->
                                <div class="card faq-item">
                                    <a class="card-header d-flex align-items-center justify-content-between" href="#0" data-toggle="collapse" data-target="#faq-tab-2" aria-expanded="false" aria-controls="faq-tab-2" id="faq-tab-2-header">
                                        <h6><span class="accordion-card-number">02</span>How Are The Packages Updated ?</h6>
                                        <span class="card-toggle-btn"></span>
                                    </a>
                                    <div id="faq-tab-2" class="collapse" aria-labelledby="faq-tab-2-header" data-parent="#faq-tab-accordion">
                                        <div class="card-body">
                                            <p>
                                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--/* .faq-item */-->
                                <div class="card faq-item">
                                    <a class="card-header d-flex align-items-center justify-content-between" href="#0" data-toggle="collapse" data-target="#faq-tab-3" aria-expanded="false" aria-controls="faq-tab-3" id="faq-tab-3-header">
                                        <h6><span class="accordion-card-number">03</span>How Are The Packages Updated ?</h6>
                                        <span class="card-toggle-btn"></span>
                                    </a>
                                    <div id="faq-tab-3" class="collapse" aria-labelledby="faq-tab-3-header" data-parent="#faq-tab-accordion">
                                        <div class="card-body">
                                            <p>
                                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--/* .faq-item */-->
                                <div class="card faq-item">
                                    <a class="card-header d-flex align-items-center justify-content-between" href="#0" data-toggle="collapse" data-target="#faq-tab-4" aria-expanded="false" aria-controls="faq-tab-4" id="faq-tab-4-header">
                                        <h6><span class="accordion-card-number">03</span>How Are The Packages Updated ?</h6>
                                        <span class="card-toggle-btn"></span>
                                    </a>
                                    <div id="faq-tab-4" class="collapse" aria-labelledby="faq-tab-4-header" data-parent="#faq-tab-accordion">
                                        <div class="card-body">
                                            <p>
                                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--/* .faq-item */-->
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-lg-6 faq-form-margin">
                            <form action="#">
                                <div class="faq-form-wrap">
                                    <h4 class="faq-form-title">Do You Have Any Question?</h4>
                                    <div class="faq-form-group">
                                        <input type="text" class="faq-form-control" name="faq_form_name" id="faqFormName" required="" placeholder="Your Name *">
                                    </div>
                                    <div class="faq-form-group">
                                        <input type="text" class="faq-form-control" name="faq_form_problem" id="faqFormProblem" required="" placeholder="Your Problem *">
                                    </div>
                                    <div class="faq-form-group">
                                        <textarea name="contact_message" id="faqFormMessage" class="faq-form-control" placeholder="Your Message *" cols="20" rows="6"></textarea>
                                    </div>
                                    <div class="faq-form-group mb-0">
                                        <button type="submit" class="faq-form-btn btn-block default-btn mb-0" id="faqFormBtn">Send question</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!--/* .row */-->
                </div>
            </div>
            <!--/* .container */-->
        </section>
        <!--/* FAQ Section End */-->

        <!--/* Contact Section Start */-->
        <section class="contact-section section-padding" data-scroll-index="7">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="section-heading">
                            <h2 class="section-title">Get In<span>Touch</span></h2>
                            <p class="section-sub-title">
                                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                            </p>
                        </div>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
                <div class="row align-items-start justify-content-center">
                    <div class="col-md-10">
                        <form id="contactForm">
                            <div class="empty-form text-center" style="display: none;"><span>Please Fill Required Fields</span></div>
                            <div class="email-invalid text-center" style="display: none;"><span>Email is invalid</span></div>
                            <div class="success-form text-center"></div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="contact-form-group">
                                        <input type="text" class="form-control" name="contact_name" id="contactName" required placeholder="Your Name *">
                                    </div>
                                </div>
                                <!--/* .col */-->
                                <div class="col-lg-6">
                                    <div class="contact-form-group">
                                        <input type="email" class="form-control" name="contact_email" id="contactEmail" required placeholder="Your Email *">
                                    </div>
                                </div>
                                <!--/* .col */-->
                                <div class="col-lg-12">
                                    <div class="contact-form-group">
                                        <input type="text" class="form-control" name="contact_subject" id="contactSubject" required placeholder="Subject *">
                                    </div>
                                </div>
                                <!--/* .col */-->
                                <div class="col-lg-12">
                                    <div class="contact-form-group">
                                        <textarea name="contact_message" id="contactMessage" class="form-control" placeholder="Your Message *" cols="20" rows="10"></textarea>
                                    </div>
                                </div>
                                <!--/* .col */-->
                                <div class="col-lg-12">
                                    <div class="contact-btn-left text-center">
                                        <button type="submit" id="contactBtn" class="default-btn">Send Message</button>
                                    </div>
                                </div>
                                <!--/* .col */-->
                            </div>
                            <!--/* .row */-->
                        </form>
                    </div>
                    <!--/* .col */-->
                </div>
                <!--/* .row */-->
            </div>
            <!--/* .container */-->
        </section>
        <!--/* Contact Section End */-->

        <!--/* Footer Section Start */-->
        <footer class="footer">
            <div class="footer-top">
                <div class="container">
                    <div class="row">
                        <div class="footer-widget col-lg-3 col-md-6 col-sm-6">
                            <div class="footer-box">
                                <h5 class="footer-title">About Us</h5>
                                <p>
                                    Appinocks is the Landing Page Template for the Mobile App. Discover the unique features of Appinocks
                                </p>
                                <div class="footer-social-links">
                                    <a href="#0"><i class="fa fa-qq"></i></a>
                                    <a href="#0"><i class="fa fa fa-wechat"></i></a>
                                    <a href="#0"><i class="fa fa-user-md"></i></a>
                                    <a href="#0"><i class="fa fa-medkit"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="footer-widget col-lg-3 col-md-6 col-sm-6">
                            <div class="footer-box">
                                <h5 class="footer-title">Usefull Links</h5>
                                <ul class="footer-links">
                                    <li>
                                        <a href="#" data-scroll-nav="0">Home</a>
                                    </li>
                                    <li>
                                        <a href="#0" data-scroll-nav="2">About</a>
                                    </li>
                                    <li>
                                        <a href="#0" data-scroll-nav="0">Services</a>
                                    </li>
                                    <li>
                                        <a href="#0" data-scroll-nav="3">Features</a>
                                    </li>
                                    <li>
                                        <a href="#0" data-scroll-nav="6">Blog</a>
                                    </li>

                                    
                                </ul>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="footer-widget col-lg-3 col-md-6 col-sm-6">
                            <div class="footer-box">
                                <h5 class="footer-title">Other Links</h5>
                                <ul class="footer-links">
                                    <li>
                                        <a href="#0">Team</a>
                                    </li>
                                    <li>
                                        <a href="#0">404</a>
                                    </li>
                                    <li>
                                        <a href="#0">Terms</a>
                                    </li>
                                    <li>
                                        <a href="#0">Support</a>
                                    </li>
                                    <li>
                                        <a href="#0">Pricing</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--/* .col */-->
                        <div class="col-md-6 col-sm-6 footer-widget col-lg-3">
                            <div class="footer-box">
                                <h5 class="footer-title">Contact Info</h5>
                                <p>50 North Peg Shop Court Beachwood, Washington DC</p>
                                <ul class="contact-info-footer">
                                    <li><i class="fa fa-phone"></i>+02 - 123 456 78 9</li>
                                    <li><i class="fa fa-envelope"></i>example@gmail.com</li>
                                    <li><i class="fa fa-fax"></i>+02 - 123 456 78 00</li>
                                </ul>
                            </div>
                        </div>
                        <!--/* .col */-->
                    </div>
                    <!-- .row -->
                </div>
                <!--/* .container */-->
            </div>
            <!--/* .footer-top */-->
            <div class="copyright">
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-lg-9">
                            <p class="text-center">© Copyright <span id="fullYearCopyright"></span>.Design with By AipThemes</p>
                        </div>
                    </div>
                    <!--/* .row */-->
                </div>
                <!--/* .container */-->
            </div>
            <!--/* .copyright */-->
        </footer>

        <!--/* Footer Section Start */-->
        <a href="#0" class="scroll-top-btn" data-scroll-goto="0">
            <i class="fa fa-arrow-up"></i>
        </a>
        <!--/* Scroll Top */-->

        <div class="preloader-wrap">
            <div class="preloader-inner">
                <div class="sk-circle"></div>
                <div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
            </div>
        </div>
        <!--/* Preloader  */-->
        
    </div>
    <!--/* Page Wrapper End */-->

    <!--/* jQuery v3.4.1 */-->
	<!--script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script-->
	
    <script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <!--/* Plugins Js */-->
	<script src="js/magnific.js"></script>
	<script src="js/popper.js"></script>
    <script src="js/plugins.js"></script>
	<script src="js/mbytbplayer.js"></script>
    <!--/* Main Js */-->
    <script src="js/main.js"></script>
</body>

</html>